<template>
    <div class="trainProgram">
      <el-form :model="trainProgramForm" :rules="rules" ref="trainProgramForm" label-width="0px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item prop="">
              <el-select v-model="trainProgramForm.region" placeholder="请选择活动区域" class="full-line">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="">
              <el-input v-model="trainProgramForm.className" placeholder="请输入班级名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="">
              <el-input v-model="trainProgramForm.className" placeholder="请输入班级名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="overflow-clear">
            <el-button type="primary" @click="submitForm('trainProgramForm')" class="float-right">立即搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <hr>

      <div>
        <div class="float-left table-title-before">
          专业培养方案管理
        </div>
        <el-button-group style="margin-bottom:4px;" class="float-right">
          <el-button type="primary"><router-link to="/TrainContent">新增方案</router-link></el-button>
          <el-button type="primary">导入数据</el-button>
          <el-button type="primary">导出数据</el-button>
        </el-button-group>
      </div>

      <div class="trainProgramTable">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="professionName"
            label="专业名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="professionId"
            label="专业代码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="reviseMan"
            label="修订人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="reviewMan"
            label="审核人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="trainPlanFile"
            label="培养计划文件"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="180">
          </el-table-column>
          <el-table-column
            label="培养内容">
            <template scope="scope">
              <router-link to="/TrainContent"><i class="el-icon-edit"></i></router-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            v-bind:page-sizes="pageSizes"
            v-bind:page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            v-bind:total="arrayTotal">
          </el-pagination>
        </div>

      </div>
    </div>
</template>
<style>
</style>

<script>
    export default{
        name: 'trainProgram',
        data(){
            return{
                trainProgramForm:{},
                pageSize:'10',
                pageSizes: [
                  10,20,30,50,100
                ],
                listTotal:'',
                arrayTotal:'',
                options: [
                  {
                    value: '选项1',
                    label: '黄金糕'
                  },
                ],
                tableData:[]
            }
        },
        components:{
        },
        mounted:function(){
            this.$nextTick(function(){
              this.listTotal = this.pageSize;
              this.queryRes();
              //this.showLength();
            })
        },
        methods: {
            handleSizeChange(val) {
              //console.log(`每页 ${val} 条`);
              //改变长度
              this.listTotal = val;
              console.log(this.listTotal);
            },
            handleCurrentChange(val) {
              this.currentPage = val;
              console.log(`当前页: ${val}`);
            },
            queryRes:function(){
               this.$http.get('/static/data.json',[]).then(response => {
                    this.arrayTotal = response.body.trainPlan.length;

                    for (const element of response.body.trainPlan){
                        this.tableData.push(element);

                        if( this.tableData.length > this.pageSize){
                            this.tableData.pop();
                        }
                    }
                    /*
                    for(const i = 0; i < this.listTotal ; i++){
                      console.log(this.listTotal);
                      this.tableData.push(response.body.trainPlan[i]);
                    }
                    */
              }, response => {
                 console.log('文件获取失败');
              });
            },
            showLength:function(){
               console.log("this is show length");
               console.log(this.tableData.length);
               console.log("end");

               if( this.tableData.length > this.pageSize){
                  this.tableData.pop();
               }
            }
        }
    }
</script>
